<template>
	<echartBox title="重点大客户" width="628px" height="362px">
		<div class="table-container">
			<div class="table-wrapper">
				<table class="customer-table">
					<thead>
						<tr>
							<th>序号</th>
							<th>客户名称</th>
							<th>用气量（万/m³）</th>
						</tr>
					</thead>
				</table>
				<div class="table-body-wrapper" ref="tableBodyWrapper">
					<div class="table-body-scroll" ref="tableBodyScroll" :class="{ 'no-transition': isTransitioning }" :style="{ transform: `translateY(${scrollOffset}px)` }">
						<table class="customer-table-body">
							<tbody>
								<tr v-for="(item, index) in extendedData" :key="`${item.id}-${index}`" :class="{ 'highlighted': index % 2 === 1 }">
									<td class="col-id">{{ item.id }}</td>
									<td class="col-name">{{ item.customerName }}</td>
									<td class="col-usage">{{ item.gasUsage }}</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
	</echartBox>
</template>

<script>
import echartBox from "../pc-page1/echart-box.vue";
export default {
	name: "pcPage2ItemBox8",
	components: { echartBox },
	props: { securityData: { type: Array, required: false, default: () => [] } },
	data() { return { extendedData: [], scrollTimer: null, scrollOffset: 0, rowHeight: 40, visibleRows: 8, currentScrollPosition: 0, isTransitioning: false } },
	mounted() { this.initScrollData(); this.startAutoScroll(); },
	beforeDestroy() { this.stopAutoScroll(); },
	methods: {
		initScrollData() { if (this.securityData.length === 0) return; this.extendedData = []; const copies = Math.max(4, Math.ceil((this.visibleRows + 2) / this.securityData.length) + 2); for (let copy = 0; copy < copies; copy++) { this.extendedData.push(...this.securityData); } },
		startAutoScroll() { this.scrollTimer = setInterval(() => { this.scrollTable(); }, 2000); },
		stopAutoScroll() { if (this.scrollTimer) { clearInterval(this.scrollTimer); this.scrollTimer = null; } },
		scrollTable() { if (this.securityData.length <= this.visibleRows) { return; } if (this.isTransitioning) { return; } this.currentScrollPosition += this.rowHeight; const originalDataLength = this.securityData.length; const singleCycleHeight = originalDataLength * this.rowHeight; if (this.currentScrollPosition >= singleCycleHeight) { this.scrollOffset = -this.currentScrollPosition; this.isTransitioning = true; setTimeout(() => { this.currentScrollPosition = 0; this.scrollOffset = 0; setTimeout(() => { this.isTransitioning = false; }, 50); }, 800); } else { this.scrollOffset = -this.currentScrollPosition; } }
	},
	watch: { securityData: { handler() { this.initScrollData(); }, immediate: true } }
};
</script>

<style scoped lang="scss">
.table-container { width: 100%; height: 100%; padding: 16px; box-sizing: border-box; }
.table-wrapper { width: 100%; height: 100%; overflow: hidden; position: relative; }
.customer-table { width: 100%; border-collapse: collapse; background: transparent; thead { tr { background: #46a6cc; height: 40px; th { color: #ffffff; font-size: 16px; font-weight: 500; text-align: center; padding: 0 12px; &:first-child { width: 70px; } &:nth-child(2) { width: 220px; } &:last-child { width: auto; } } } } }
.table-body-wrapper { width: 100%; height: 270px; overflow: hidden; position: relative; }
.table-body-scroll { transition: transform 0.8s ease-in-out; &.no-transition { transition: none; } }
.customer-table-body { width: 100%; border-collapse: collapse; background: transparent; tbody { tr { height: 40px; background: transparent; &.highlighted { background: rgba(61, 68, 122, 0.3); } &:hover { background: rgba(61, 68, 122, 0.5); } td { color: #ffffff; font-size: 14px; text-align: center; padding: 0 12px; border-top: none; } } } }
.col-id { color: #00d4ff !important; font-weight: 500; width: 70px; }
.col-name { color: #ffffff !important; width: 220px; }
.col-usage { color: #00ff88 !important; font-weight: 500; width: auto; }
</style>
